import { defineComponent, ref } from 'vue'
import { useTodoStore } from '@/stores/todo'

export default defineComponent({
  name: 'TodoList',
  setup() {
    const todoStore = useTodoStore()
    const newTodo = ref('')

    const handleSubmit = (e: Event) => {
      e.preventDefault()
      if (newTodo.value.trim()) {
        todoStore.addTodo(newTodo.value.trim())
        newTodo.value = ''
      }
    }

    return () => (
      <div class="w-full bg-gray-100 py-4">
        <div class="w-full p-6 bg-white rounded-xl shadow-lg">
          <h1 class="text-base font-bold text-slate-500 mb-6">任务列表</h1>
          
          <form onSubmit={handleSubmit} class="flex gap-3 mb-4">
            <input
              type="text"
              v-model={newTodo.value}
              placeholder="新建任务"
              class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <button 
              type="submit" 
              class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors duration-200"
            >
              添加
            </button>
          </form>

          <div class="space-y-2 mb-1 overflow-scroll h-[10rem]">
            {todoStore.todos.map(todo => (
              <div key={todo.id} class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onChange={() => todoStore.toggleTodo(todo.id)}
                  class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
                />
                <span class={`flex-1 ${todo.completed ? 'line-through text-gray-400' : 'text-gray-700'}`}>
                  {todo.text}
                </span>
                <button
                  onClick={() => todoStore.deleteTodo(todo.id)}
                  class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors duration-200"
                >
                  Delete
                </button>
              </div>
            ))}
          </div>

          <div class="flex justify-between text-sm text-gray-600">
            <p>未完成: { todoStore.activeTodos.length } </p>
            <p>已完成: { todoStore.completedTodos.length } </p>
          </div>
        </div>
      </div>
    )
  }
})